import React, { useState, ReactNode } from "react";
import { Steps, Button, Space } from "antd";
import { LeftOutlined } from "@ant-design/icons";
import Modal from "@/components/Modal";
import ModalStyle from "@/components/Modal/modal.module.css";
import "./style.less";

export interface StepConfig {
  /** 步骤标题 */
  title: string;
  /** 步骤内容 */
  content: ReactNode;
  /** 步骤描述 */
  description?: string;

  /** 是否禁用下一步按钮 */
  nextDisabled?: boolean;
}

export interface SteppedModalProps {
  /** 对话框标题 */
  title?: string;
  /** 对话框是否可见 */
  visible: boolean;
  /** 关闭回调 */
  onCancel: () => void;
  /** 完成所有步骤后的回调 */
  onFinish?: () => void;
  /** 步骤配置数组 */
  steps: StepConfig[];
  /** 宽度 */
  width?: number | string;
  /** 完成按钮文本 */
  finishText?: string;
  /** 下一步按钮文本 */
  nextText?: string;
  /** 上一步按钮文本 */
  prevText?: string;
  /** 取消按钮文本 */
  cancelText?: string;
  /** 是否在完成时关闭对话框 */
  closeOnFinish?: boolean;
  /** 初始步骤索引 */
  initialStep?: number;
  /** 步骤切换前的钩子，返回 false 可阻止切换 */
  onStepChange?: (current: number, next: number) => boolean | Promise<boolean>;
  /** 自定义底部样式 */
  footerStyle?: React.CSSProperties;
}

/**
 * 步骤式对话框组件
 *
 * 包含顶部步骤条和底部导航按钮，适用于分步骤引导、表单等场景
 */
const SteppedModal: React.FC<SteppedModalProps> = ({
  visible,
  onCancel,
  onFinish,
  steps,
  width = 1000,
  finishText = "完成",
  nextText = "下一步",
  prevText = "上一步",
  closeOnFinish = true,
  initialStep = 0,
  footerStyle = {},
  onStepChange,
}) => {
  const [current, setCurrent] = useState(initialStep);
  const [loading, setLoading] = useState(false);

  // 是否是最后一步
  const isLastStep = current === steps.length - 1;

  // 当前步骤配置
  const currentStep = steps[current];

  // 处理步骤变化
  const handleStepChange = async (nextStep: number) => {
    // 如果有步骤切换钩子，先执行钩子
    if (onStepChange) {
      setLoading(true);
      try {
        const canChange = await onStepChange(current, nextStep);
        setLoading(false);
        if (!canChange) return;
      } catch (error) {
        console.error("步骤切换钩子执行失败", error);
        setLoading(false);
        return;
      }
    }

    setCurrent(nextStep);
  };

  // 下一步
  const handleNext = () => {
    if (current < steps.length - 1) {
      handleStepChange(current + 1);
    }
  };

  // 上一步
  const handlePrev = () => {
    if (current > 0) {
      handleStepChange(current - 1);
    }
  };

  // 完成
  const handleFinish = () => {
    if (onFinish) {
      onFinish();
    }

    if (closeOnFinish) {
      onCancel();
    }
  };

  // 自定义底部按钮
  const footer = (
    <div
      className={ModalStyle.footer}
      style={{
        ...footerStyle,
        height: 64, // 固定高度为 64px
        backgroundColor: "#EFEFF6",
        display: "flex",
        justifyContent: "space-between", // 两端对齐
      }}
    >
      <div>
        {current > 0 && (
          <Button
            type="text"
            onClick={handlePrev}
            disabled={loading}
            icon={<LeftOutlined />}
          >
            {prevText}
          </Button>
        )}
      </div>

      <div>
        {!isLastStep ? (
          <Button
            type="primary"
            onClick={handleNext}
            disabled={loading || currentStep.nextDisabled}
          >
            {nextText}
          </Button>
        ) : (
          <Button
            type="primary"
            onClick={handleFinish}
            disabled={loading || currentStep.nextDisabled}
          >
            {finishText}
          </Button>
        )}
      </div>
    </div>
  );

  return (
    <Modal
      title={
        <div className="stepped-modal-steps">
          <Steps
            current={current}
            items={steps.map((step) => ({
              title: step.title,
              description: step.description,
            }))}
            size="small"
          />
        </div>
      }
      visible={visible}
      onCancel={onCancel}
      width={width}
      className="stepped-modal"
      footer={footer}
    >
      <div className="stepped-modal-content">
        <div className="stepped-modal-body">{currentStep.content}</div>
      </div>
    </Modal>
  );
};

export default SteppedModal;
